<!--  -->
<template>
    <div>
        <div ref="main">
        </div>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, ref, } from 'vue';
import { chinaMap } from '../../../../utils/map/china'
import axios from 'axios';
const data = ref([])
const main = ref()
onMounted(() => {
    init()
})
const init = async () => {
    // 获取地图数据
    await axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/map').then(res => {
        data.value = res.data
    })
    // 1通过dom初始化echarts 2ref虚拟化dom
    let mychart = echarts.init(main.value)
    //   注册地图数据
    echarts.registerMap('chinaMap', chinaMap as any)
    // 数据源
    var option = {
        title: {
            text: '门店城市销量排行',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
        },
        // 地图
        geo: {
            map: 'chinaMap',
            type: 'map',
            zoom: 1.2,
            itemStyle: {
                areaColor: '#009fcc',
                borderColor: '#c6c6c6',
                shadowColor: 'rgba(230,130,70,0.5)',
                shadowBlur: 10,
            },
            // 设置选中高亮
            emphasis: {
                // 选中的时候
                focus: 'self',
                // 选中时 颜色
                areaColor: 'yellow',
                shadowBlur: 20,
                // 选中时其他区域的颜色
                ShadowColor: 'rgba(0,0,0,0.5)'
            },
        },
        // 映射
        visualMap: {
            left: 'right',
            min: 100,
            max: 500,
            inRange: {
                color: [
                    '#313695',
                    '#4575b4',
                    '#74add1',
                    '#abd9e9',
                    '#e0f3f8',
                    '#ffffbf',
                    '#fee090',
                    '#fdae61',
                    '#f46d43',
                    '#d73027',
                    '#a50026'
                ]
            },
            text: ['高销量', '低销量'],
            calculable: true
        },
        series: [{
            type: 'scatter', // 特效散点图，也可用普通散点图scatter
            coordinateSystem: 'geo', // 坐标系使用geo，以地图作为底图
            itemStyle: {
                borderColor: '#06B9D1',
                color: 'red'
            },
            data: data.value,
            encode: {
                value: 2
            },

        }]
    };

    // 数据源给予
    mychart.setOption(option)
}

</script>
<style lang='less' scoped>
div {
    width: 100%;
    height: 815px;
}
</style>